<template>
  <div :style="{ height: tableHeight + 'px', background: '#ffffff' }">
    <ContentWrap>
      <div class="btnWrap routeHeader">
        <div>
          <el-button
            v-hasPermi="['produce:production-prepare-proofreader:proofread']"
            v-if="route.query.type == 'proofread'"
            @click="proofreadData"
            type="primary"
            >校对</el-button
          >
          <el-button
            v-hasPermi="['produce:production-prepare-proofreader:examine']"
            v-if="route.query.type == 'examine'"
            @click="examineData"
            type="primary"
            >审核</el-button
          >
          <el-button
            v-if="queryParam.dictPrepareStatus == '50'"
            @click="printDistributionList"
            type="primary"
            v-hasPermi="['produce:production-prepare-proofreader:printDistributionList']"
            >打印备货单</el-button
          >
          <el-button @click="close">关闭</el-button>
        </div>
      </div>
    </ContentWrap>

    <ContentWrap>
      <div>基本信息</div>
      <el-form class="-mb-5px" :model="queryParam" :inline="true" label-width="110px">
        <el-form-item label="订单号" prop="orderNumber">
          <div class="select-wrapper">
            <el-input v-model="queryParam.orderNumber" disabled class="!w-220px" />
          </div>
        </el-form-item>
        <el-form-item label="订单类型" prop="dictOrderType">
          <el-select
            v-model="queryParam.dictOrderType"
            placeholder="请选择订单类型"
            clearable
            class="!w-220px"
            disabled
          >
            <el-option
              v-for="(dict, index) in getIntDictOptions(DICT_TYPE.MARKET_ORDER_TYPE)"
              :key="index"
              :label="dict.label"
              :value="dict.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="客户代码" prop="customerCode">
          <el-input v-model="queryParam.customerCode" class="!w-220px" disabled />
        </el-form-item>
        <el-form-item label="客户名称" prop="customerName">
          <el-input v-model="queryParam.customerName" class="!w-220px" disabled />
        </el-form-item>
        <el-form-item label="产品编码" prop="productNumber">
          <el-input v-model="queryParam.productNumber" class="!w-220px" disabled />
        </el-form-item>
        <el-form-item label="产品名称" prop="productName">
          <el-input v-model="queryParam.productName" class="!w-220px" disabled />
        </el-form-item>
        <el-form-item label="产品规格" prop="productStandard">
          <el-input v-model="queryParam.productStandard" class="!w-220px" disabled />
        </el-form-item>
        <el-form-item label="清单编号" prop="prepareNumber">
          <el-input v-model="queryParam.prepareNumber" class="!w-220px" disabled />
        </el-form-item>
      </el-form>
    </ContentWrap>
    <ContentWrap>
      <div class="btnWrap">
        <div>清单明细</div>
        <div> </div>
      </div>
      <el-table :data="list" border>
        <el-table-column type="index" width="55" label="序号" align="center" fixed="left"/>
        <!-- 列定义 -->
        <el-table-column align="left" width="180">
          <template #header>
            <span>部件编码</span>
          </template>
          <template #default="scope"> {{ scope.row.partNumber }} </template>
        </el-table-column>
        <el-table-column align="left" width="180">
          <template #header>
            <span>部件名称</span>
          </template>
          <template #default="scope"> {{ scope.row.partName }} </template>
        </el-table-column>
        <el-table-column align="left" width="180">
          <template #header>
            <span>图纸图号</span>
          </template>
          <template #default="scope"> {{ scope.row.drawingNumber }} </template>
        </el-table-column>
        <el-table-column align="left" width="180">
          <template #header>
            <span>部件规格</span>
          </template>
          <template #default="scope"> {{ scope.row.partSpecification }} </template>
        </el-table-column>
        <el-table-column align="left" width="180">
          <template #header>
            <span>生产数量</span>
          </template>
          <template #default="scope">
            <span>{{ scope.row.incomingQuantity }}</span>
          </template>
        </el-table-column>
        <el-table-column align="left" width="180">
          <template #header>
            <span style="color: red">*</span>
            <span>备货数量</span>
          </template>
          <template #default="scope">
            <el-input
              v-nextInput="'prepareQuantity'"
              name="prepareQuantity"
              v-model="scope.row.prepareQuantity"
              placeholder="请输入备货数量"
              type="number"
              :min="0"
              :max="100"
              class="!w-140px"
              disabled
            />
          </template>
        </el-table-column>
        <el-table-column align="left" width="180">
          <template #header>
            <span>单位</span>
          </template>
          <template #default="scope"> {{ scope.row.dictUnit }} </template>
        </el-table-column>
        <el-table-column label="备注" align="left" width="180">
          <template #default="scope">
            <el-input
              v-nextInput="'remark'"
              name="remark"
              v-model="scope.row.remark"
              placeholder="请输入备注"
              class="!w-140px"
              disabled
            />
          </template>
        </el-table-column>
        <!-- <el-table-column label="入库类型" align="left" width="180">
          <template #default="scope">
            <dict-tag :type="DICT_TYPE.DICT_PREPARE_STATUS" :value="scope.row.dictIncomingType" />
          </template>
        </el-table-column> -->
        <el-table-column label="仓库名称" align="left" width="180">
          <template #default="scope"> {{ scope.row.warehouseName }} </template>
        </el-table-column>
      </el-table>
    </ContentWrap>
    <ContentWrap
      v-if="
        route.query.dictPrepareStatus == 40 ||
        route.query.dictPrepareStatus == 50 ||
        route.query.dictPrepareStatus == 10
      "
    >
      <div
        v-if="
          route.query.dictPrepareStatus == 40 ||
          route.query.dictPrepareStatus == 50 ||
          route.query.dictPrepareStatus == 10
        "
      >
        <div>校对意见</div>
        <el-form class="-mb-5px" :model="queryParam" :inline="true" label-width="110px">
          <div>
            <el-form-item label="校对人" prop="proofreaderName">
              <el-input v-model="queryParam.proofreaderName" disabled class="!w-220px" />
            </el-form-item>
          </div>
          <div>
            <el-form-item label="校对意见" prop="proofreaderOpinion">
              <el-input
                v-model="queryParam.proofreaderOpinion"
                type="textarea"
                disabled
                class="!w-1000px"
              />
            </el-form-item>
          </div>
        </el-form>
      </div>
      <div v-if="route.query.dictPrepareStatus == 50 || route.query.dictPrepareStatus == 10">
        <div>审核意见</div>
        <el-form class="-mb-5px" :model="queryParam" :inline="true" label-width="110px">
          <div>
            <el-form-item label="审核人" prop="approverName">
              <el-input v-model="queryParam.approverName" disabled class="!w-220px" />
            </el-form-item>
          </div>
          <div>
            <el-form-item label="审核意见" prop="approverOpinion">
              <el-input
                v-model="queryParam.approverOpinion"
                type="textarea"
                disabled
                class="!w-1000px"
              />
            </el-form-item>
          </div>
        </el-form>
      </div>
    </ContentWrap>
    <!-- 校对 -->
    <ProofreadForm ref="ProofreadFormRef" />
    <!-- 审核 -->
    <ExamineForm ref="examineFormRef" />
  </div>
  <!-- 打印 -->
  <div v-show="false" id="printData">
    <print :detailData="queryParam" />
  </div>
</template>

<script lang="ts" setup>
  import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
  import { useRoute } from 'vue-router'
  import * as productionPrepareProofreaderApi from '@/api/produce/productManagement/productionPrepareProofreader'
  import { useTagsViewStore } from '@/store/modules/tagsView'
  import ProofreadForm from './proofreadForm.vue'
  import ExamineForm from './examineForm.vue'
  import print from './print.vue'
  const tagsViewStore = useTagsViewStore()
  const routes = useRouter() // 路由
  const route = useRoute()
  const queryParam = reactive({
    orderNumber: undefined,
    dictOrderType: undefined,
    customerCode: undefined,
    customerName: undefined,
    productNumber: undefined,
    productName: undefined,
    productStandard: undefined,
    prepareNumber: undefined,
    dictPrepareStatus: undefined,
    proofreaderResult: undefined,
    proofreaderOpinion: undefined,
    approverResult: undefined,
    approverOpinion: undefined,
    proofreaderName: undefined,
    approverName: undefined,
    id: undefined,
    productionPrepareDetailCreateReqVOS: []
  })
  // const dialogTitle = ref('')
  const { push } = useRouter()
  const list = ref<any>([])
  const formLoading = ref(false)
  const ProofreadFormRef = ref()
  /**校对 */
  const proofreadData = async () => {
    queryParam.productionPrepareDetailCreateReqVOS = list.value
    ProofreadFormRef.value.open(queryParam)
  }
  const examineFormRef = ref()
  /**审核 */
  const examineData = async () => {
    queryParam.productionPrepareDetailCreateReqVOS = list.value
    console.log(queryParam)
    examineFormRef.value.open(queryParam)
  }
  /**关闭 */
  const close = () => {
    tagsViewStore.delView(routes.currentRoute.value)
    push('/produce/produce/productManagement/productionPrepareProofreader')
  }
  /**打印备货清单 */
  const printDistributionList = () => {
    console.log(queryParam)
    let winName, head, bdHtml
    winName = window.open('', '_blank', '') // 新窗口
    head = '<link rel="stylesheet" href="//unpkg.com/element-plus/dist/index.css" />'
    const tabStyle = `
          <style>
            .title {
              font-size: 22px;
              font-weight: bold;
              text-align: center;
              width: 350px;
              margin: 0 auto;
            }

            .logo {
              float: left;
              width: 200px;
              height: 50px;
            }

            .tab {
              border: 1px solid #e4e7ed;
              text-align: center;
            }

            .d-flex {
              display: flex;
              align-items: center;
            }

            .card {
              height: 50px;
              line-height: 50px;
            }

            .card-confirm {
              height: 100px;
              line-height: 100px;
            }

            .card:not(:last-child),
            .card-confirm:not(:last-child) {
              border-right: 1px solid #e4e7ed;
            }

            .height-100px {
              height: 100px;
            }

            .border-bottom {
              border-bottom: 1px solid #e4e7ed;
            }

            .width-25 {
              width: 25%;
            }

            .width-10 {
              width: 10%;
            }

            .width-20 {
              width: 20%;
            }

            .width-30 {
              width: 30%;
            }
            .width-85 {
              width: 85%;
            }
            .width-15 {
              width: 15%;
            }
          </style>
          `
    head += tabStyle
    bdHtml = window.document.querySelector('#printData').innerHTML
    winName.document.head.innerHTML = head
    winName.document.body.innerHTML = bdHtml
    winName.focus() //聚焦保证页面正常
    setTimeout(() => {
      winName.print()
    }, 500)
  }
  //获取订单信息
  const getDetail = async (id) => {
    const data = await productionPrepareProofreaderApi.getProductionPrepareProofreaderDetail(id)
    queryParam.orderNumber = data.orderNumber
    queryParam.dictOrderType = data.dictOrderType
    queryParam.customerCode = data.customerCode
    queryParam.customerName = data.customerName
    queryParam.productNumber = data.productNumber
    queryParam.productName = data.productName
    queryParam.productStandard = data.productStandard
    queryParam.prepareNumber = data.prepareNumber
    queryParam.dictPrepareStatus = data.dictPrepareStatus
    queryParam.proofreaderResult = data.proofreaderResult
    queryParam.proofreaderOpinion = data.proofreaderOpinion
    queryParam.proofreaderName = data.proofreaderName
    queryParam.approverName = data.approverName
    queryParam.approverOpinion = data.approverOpinion
    queryParam.approverResult = data.approverResult
    queryParam.productionPrepareDetailCreateReqVOS = data.productionPrepareDetailRespVOS
    queryParam.id = data.id
    list.value = data.productionPrepareDetailRespVOS
  }
  const contentHeight = ref(0)
  const refreshData = async () => {
    formLoading.value = true
    contentHeight.value = document.body.clientHeight - 127
    formLoading.value = false
  }
  // 初始化
  const tableHeight = ref(0)
  onMounted(async () => {
    tableHeight.value = document.body.clientHeight - 130
    refreshData()
    if (route.query.id) {
      getDetail(route.query.id)
    }
  })
</script>
<style lang="scss" scoped>
  .contentView {
    padding: 10px;
    background: #fff;
  }
  .tableView {
    :deep(.el-input__wrapper) {
      box-shadow: 0 0 0 0px var(--el-input-border-color, var(--el-border-color)) inset;
      cursor: default;
      .el-input__inner {
        cursor: default !important;
        text-align: center;
      }
    }
  }
  .btnWrap {
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
  }
  .el-table .custom-header::before {
    content: '*';
    color: red;
    margin-right: 4px; /* 根据需要调整小红星与字段的位置 */
  }
  .dropdown-width {
    width: 50px !important;
  }
  :deep(.el-form .el-input, .el-form .el-input__wrapper, .el-form .el-textarea) {
    width: 100% !important;
  }
  .select-wrapper {
    display: flex;
    align-items: center;
  }

  .search-icon {
    margin-left: -24px; /* 这里的 -24px 是根据 Icon 的宽度进行调整的 */
    cursor: pointer;
    margin-top: 5px;
  }
</style>
